<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>班级分析</title>
<base href="<%=basePath%>">
<meta name="description" content="HPE">
<meta name="author" content="HPE">

<!-- end: Meta -->

<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->

<!-- start: CSS -->
<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css"
	rel="stylesheet">
<!-- end: CSS -->
<!-- start: JavaScript-->

	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery-migrate-1.0.0.min.js"></script>

	<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

	<script src="js/jquery.ui.touch-punch.js"></script>

	<script src="js/modernizr.js"></script>

	<script src="js/bootstrap.min.js"></script>

	<script src="js/jquery.cookie.js"></script>

	<script src='js/fullcalendar.min.js'></script>

	<script src='js/jquery.dataTables.min.js'></script>

	<script src="js/excanvas.js"></script>
	<script src="js/jquery.flot.js"></script>
	<script src="js/jquery.flot.pie.js"></script>
	<script src="js/jquery.flot.stack.js"></script>
	<script src="js/jquery.flot.resize.min.js"></script>

	<script src="js/jquery.chosen.min.js"></script>

	<script src="js/jquery.uniform.min.js"></script>

	<script src="js/jquery.cleditor.min.js"></script>

	<script src="js/jquery.noty.js"></script>

	<script src="js/jquery.elfinder.min.js"></script>

	<script src="js/jquery.raty.min.js"></script>

	<script src="js/jquery.iphone.toggle.js"></script>

	<script src="js/jquery.uploadify-3.1.min.js"></script>

	<script src="js/jquery.gritter.min.js"></script>

	<script src="js/jquery.imagesloaded.js"></script>

	<script src="js/jquery.masonry.min.js"></script>

	<script src="js/jquery.knob.modified.js"></script>

	<script src="js/jquery.sparkline.min.js"></script>

	<script src="js/counter.js"></script>

	<script src="js/retina.js"></script>

	<script src="js/custom.js"></script>
	<script src="js/echarts.min.js"></script>
	<!-- end: JavaScript-->

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	  	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<link id="ie-style" href="css/ie.css" rel="stylesheet">
	<![endif]-->

<!--[if IE 9]>
		<link id="ie9style" href="css/ie9.css" rel="stylesheet">
	<![endif]-->



</head>

<body>


	<div class="container-fluid-full">
		<div class="row-fluid">
			<!-- start: Header -->
			<jsp:include page="header.jsp"></jsp:include>
			<!-- start: Header -->
			<jsp:include page="sidebar.jsp"></jsp:include>

			<!-- start: Content -->
			<!-- start: 主体 -->
			<div id="content" class="span10">
				<ul class="breadcrumb">
					<li><i class="icon-home"></i> <a href="#">Home</a> <i
						class="icon-angle-right"></i></li>
					<li>班级分析</li>
				</ul>


				<div class="row-fluid hideInIE8 circleStats">
					<!--start写在这里-->

					<div id="echart" style="width: 600px; height: 400px;"></div>
					<div id="echart2" style="width: 600px; height: 400px;"></div>
					
				</div>


			</div>

			<!-- end: Content -->
			<!-- end: 主体结束 -->
		</div>
		<!--/#content.span10-->
	</div>
	<!--/fluid-row-->

	<!--这里写数据-->
	<script type="text/javascript">

	var classlist = [];
	
	var personnum = [];
	var employRate =[];
	//var schoolStr = "\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"";
	//var personnum = "10, 52, 200, 334, 390, 330, 220";
	//var employRate ="10, 52, 12, 52, 45, 78, 96";
		$(function() {
			get();
			
		})

		function get() {
			$.ajax({
				type : "post",
				url : "#",
				dataType:"json",
				success : function(data) {
					$.each(data, function(index, info) {
						classlist.push(info.classtype+info.classid);
						personnum.push(info.classnum);
						employRate.push(info.employeeRate);
					})
					chartoption();
				}
			})
		}

		function chartoption(){
			
			var echart = echarts.init(document.getElementById('echart'));
			var echart2 = echarts.init(document.getElementById('echart2'));
			option = {
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : school,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'统计人数',
				            type:'bar',
				            barWidth: '60%',
				            data:personnum
				        }
				    ]
				};
			
			option2 = {
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel: {  
				                  show: true,  
				                  interval: 'auto',  
				                  formatter: '{value} %'  
				                },  
				            show: true 
				        }
				    ],
				    series : [
				        {
				            name:'就业率',
				            type:'bar',
				            barWidth: '60%',
				            data:employRate
				        },
				    ]
				};

			echart.setOption(option); 
			echart2.setOption(option2); 
		}
	</script>
</body>

</html>